<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1.设置canvas -->
    <canvas id="canvas" width="200" height="200"></canvas>

    <script>
      // 2.获取canvas
      const canvas = document.getElementById('canvas')
      // 3.得到ctx  (getContext返回一个包含绘制图形的方法和属性的对象)
      const ctx = canvas.getContext('2d')
      // 4.设置起点坐标
      ctx.moveTo(10, 10)
      // 5.设置终点坐标
      ctx.lineTo(100, 100)
      // 6.执行绘制
      ctx.strokeStyle = '#ff2d51'

      ctx.stroke()
    </script>
  </body>
</html>
